<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title></title>
  <script src="../vue.js"></script>
</head>

<body>
  v-model： input(text,password) textarea--- value

  v-model： input(checkbox,radi,必须有value)
  select optoion(可以不写value,不写就取option中间的内容，写了就取value)

  --- 选中的状态
  <div id="app">
    <input type="checkbox" id="aa" v-model="flag">
    <label for="aa">AA--{{flag}}</label>

    多选
    <label for="banana">香蕉</label>
    <input type="checkbox" id="banana" value="banana" v-model="fruit">
    <label for="apple">苹果</label>
    <input type="checkbox" id="apple" value="apple" v-model="fruit">
    <label for="pear">梨</label>
    <input type="checkbox" id="pear" value="pear" v-model="fruit">
    <p> {{ fruit }} </p>


    单选
    <input type="radio" name="sex" id="man" value="man1" v-model="sexStr">
    <label for="man">男</label>
    <input type="radio" name="sex" id="woman" value="woman1" v-model="sexStr">
    <label for="woman">女</label>
    <h1> {{sexStr}} </h1>

    <select v-model="selecteda" multiple>
      <option value="a">A</option>
      <option value="b">B</option>
      <option value="c">C</option>
      <option value="d">D</option>
    </select>
    <h1>{{selecteda}}</h1>
  </div>
  <script>
    const vm = new Vue({
      el: "#app",
      data: {
        flag: true,
        fruit: [],
        sexStr: [],
        selecteda: []
      }

    })
  </script>
</body>

</html>